<template>
  <edu-dialog
    :title.sync="dialog.title"
    :visible.sync="dialog.showDialog"
    @close="close"
    @confirm="confirm"
    width="800px"
  >
    <el-row class="cardMiniBar" v-if="roleIdList.length == 1">
      <el-col :span="24">
        <div class="fr">
          <el-button type="primary" @click="exportExcel()" size="small"
            >导出</el-button
          >
        </div>
      </el-col>
    </el-row>
    <el-transfer
      class="transfer"
      v-model="accountIdList"
      ref="transfer"
      filterable
      :data="allList"
      :filter-method="filterMethod"
      :titles="['未绑定用户', '已绑定用户']"
      :props="{ key: 'accountId', label: 'accountName' }"
    >
      <span slot-scope="{ option }">{{
        option.nickName || option.accountName
      }}</span>
    </el-transfer>
  </edu-dialog>
</template>

<script>
import {
  queryRoleAccountList,
  updateRoleAccount,
  exportBindedAccountList,
} from "@/api/roles";
import utils from "@/utils";
import mixins from "@/mixins";

export default {
  mixins: [mixins],
  data() {
    return {
      queryParams: {
        condition: {},
        pageNum: 1,
        pageSize: 10,
        total: 0,
      },
      allList: [],
      accountIdList: [],
      roleIdList: [],
      dialog: {
        title: "关联用户",
        showDialog: false,
        formData: {},
        rules: {},
      },
    };
  },
  created() {},
  methods: {
    open(data) {
      this.dialog.showDialog = true;
      this.accountIdList = [];
      this.roleIdList = data;

      this.queryList();
    },
    close() {
      this.dialog.formData = {};

      this.dialog.showDialog = false;
    },
    async queryList() {
      let { returnObj } = await queryRoleAccountList(
        this.roleIdList.toString()
      );

      this.allList = returnObj.bindedAccountList.concat(
        returnObj.unbindAccountList
      );

      this.accountIdList = returnObj.bindedAccountList.map(
        (item) => item.accountId
      );
    },
    filterMethod(query, item) {
      let name = item.nickName || item.accountName;
      return name.indexOf(query) > -1;
    },
    async confirm() {
      // if (!this.accountIdList || this.accountIdList.length == 0) {
      //   this.$message({
      //     type: "warning",
      //     message: "请选择",
      //   });
      //   return;
      // }
      await updateRoleAccount({
        accountIdList: this.accountIdList,
        roleIdList: this.roleIdList,
      });

      this.close();

      this.$message({
        type: "success",
        message: "成功",
      });

      this.$emit("done");
    },
    exportExcel() {
      exportBindedAccountList(this.roleIdList.toString()).then((res) => {
        utils.downloadFile(res);
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.transfer {
  width: 100%;
  display: flex;
  align-items: center;
  ::v-deep .el-transfer-panel {
    flex: 1;
  }
}
</style>
